import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./duty.module.less";
import { SearchOutlined } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
import { useRouter } from "vue-router";

export default defineComponent({
  name:'userCenterDuty',
  setup() {
    const router = useRouter();
    //导航栏
    const navs = ref([
      {
        text: '全部订单',
      },
      {
        text: '待支付',
      },
      {
        text: '待出单',
      },
      {
        text: '已出单',
      },
      {
        text: '出单失败',
      },
      {
        text: '已注销',
      },
    ]);
    const state = reactive({
      search: '',
      list: [
        // {
        //   dingdanhao: ' D2212131055510357170',
        //   date: '2022-12-13 10:55:51',
        //   img: imgPath('/userCenter/orderImg.png'),
        //   title: '2023年度旅行社责任险',
        //   startTime: '2023-01-01',
        //   endTime: '2023-12-31',
        //   toubaodanhao: 'T2212131055510734713',
        //   chudanshijian: '2023-01-17 17:50:23',
        //   status: '未开票',
        //   baodanhao: 'PZFW20233302W500E00222',
        //   money: '11012.12'
        // }
      ],
      date: ''
    })
    const navsActived = ref(0);
    const navClick = (index: number) => {
      navsActived.value = index
    }
    //搜索
    const searchFor = () => {
      console.log(state.search)
    }
    //企业信息变更
    const enterpriseChange = () => {
      router.push('/userCenter/duty/correct/enterprise')
    }
    //分社变更
    const branchnew = () => {
      router.push('/userCenter/duty/correct/branchnew')
    }
    //保额变更
    const insuredAmount = () => {
      router.push('/userCenter/duty/correct/insuredAmount')
    }
    //经营资质变更
    const bussinessScope = () => {
      router.push('/userCenter/duty/correct/bussinessScope')
    }
    //获取时间
    const getDate = () => {
      let nowTime = new Date();
      let YYYY = nowTime.getFullYear();
      let MM = String(nowTime.getMonth() + 1).padStart(1);
      let DD = String(nowTime.getDate()).padStart(2, "0");
      state.date = YYYY + '-' + MM + '-' + DD;
    }
    onMounted(() => {
      getDate()
    });
    return () => (
      <div class={styles.duty}>
        <div class={styles['header-box']}>旅责险订单</div>
        <div class={styles['tabbar-box']}>
          <div class={styles['nav-box']}>
            {
              navs.value.map((itemN: any, index: number) => (
                <div class={styles['nav-box-item']} onClick={() => { navClick(index) }}>
                  <span class={
                    [
                      styles.text,
                      index === navsActived.value && styles['nav-item-actived'],
                      index !== navsActived.value && styles['nav-item-noActived']
                    ]
                  }>{itemN.text}</span>
                </div>
              ))
            }
          </div>

          <div class={styles['search-box']}>
            <input placeholder="请输入订单号、投保单号" v-model={state.search} />
            <div class={styles.btn} onClick={() => { searchFor() }}><SearchOutlined class={styles['input-icon']} /></div>
          </div>
        </div>
        <div class={styles['order-list-thead']}>
          <div class={styles['col-first']}>订单详情</div>
          <div class={styles['col-last']}>状态/保费(元)</div>
          <div class={styles['col-three']}>操作</div>
        </div>

        {
          state.list.length === 0 ?
            <div class={styles['order-list-content']}>
              <img src={imgPath('/home/no-message.jpg')} />
            </div> :
            <div>
              {
                state.list.map((item: any) => (
                  <div class={styles['order-item']}>
                    <div class={styles['order-item-headerBox']}>
                      <span class={styles.orderNum}>订单号：{item.dingdanhao}</span>
                      <span>下单时间：{item.date}</span>
                      <div class={styles.fr} >
                        <a-dropdown placement="bottom" v-slots={{
                          overlay: () => (
                            <div class={styles.dropDown}>
                              <span onClick={() => { enterpriseChange() }}>企业信息变更</span>
                              <span onClick={() => { branchnew() }}>分社变更</span>
                              <span onClick={() => { insuredAmount() }}>保额变更</span>
                              <span onClick={() => { bussinessScope() }}>经营资质变更</span>
                              <span>退保</span>
                            </div>
                          )
                        }}>
                          <span>批改保单</span>
                        </a-dropdown>
                      </div>
                    </div>
                    <div class={styles['order-item-content']}>
                      <div class={styles['order-item-info']}>
                        <img src={item.img} />
                        <div class={styles['prod-info']}>
                          <div class={styles.title}
                            onClick={() => window.open('')}
                          >{item.title}</div>
                          <div class={styles['order-item-row']}>
                            <span>保险期间：{item.startTime}至{item.endTime}</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>投保人：宁波世纪美亚国际旅行社有限公司</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>投保单号：{item.toubaodanhao}</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>出单时间：{item.chudanshijian}</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>发票状态：{item.status}</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>保单号：</span>
                            <span class={styles.value}>{item.baodanhao}</span>
                          </div>
                        </div>
                      </div>
                      <div class={styles['order-item-money']}>
                        <div class={styles.status}>已出单</div>
                        <div class={styles.money}>￥{item.money}</div>
                        <div>转账支付</div>
                      </div>
                      <div class={styles['order-item-operate']}>
                        <div class={styles.download} onClick={() => { window.location.href = '' }}>下载电子保单</div>
                        <div class={styles['link-text']} onClick={() => { router.push('/userCenter/duty/detail') }}>订单详情</div>
                        <div class={styles['link-text']}>申请电子发票</div>
                      </div>
                    </div>
                  </div>
                ))
              }
            </div>
        }
      </div>
    )
  }
})